import './C2bannerEdit.less';
import { observer } from 'mobx-react';
import { Form, Input, Button, Checkbox, Radio, Modal, Image, Tag, Pagination,message } from 'antd';
import React, { useState, useEffect } from 'react';
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import http from '../../utils/http';
import imageHttp from '../../utils/imageHttp';
import { Select, Table, Space } from 'antd';
import { remove } from 'mobx';
import * as dayjs from 'dayjs';

const C2bannerAdd = () => {
    console.log('dsd');
    //所有参数
    //图片上传返回的地址
    const [imageUrl, setImageUrl] = useState('');

    //出来先将图片上传的token获取
    const [imageToken, setImageToken] = useState('');
    //是否选择商店
    const [isChoose, setIsChoose] = useState('未选择');
    //选择的个数
    const [chooseNum, setChooseNum] = useState(0);
    useEffect(() => {
        //查询图片的token
        imageHttp({
            url: 'http://img.qincore.cn/api/token',
            method: 'post',
            data: {
                email: 'andyhuyuxin@outlook.com',
                password: '121hulihu'
            }
        }).then((res) => {
            setImageToken(res.data.token);
        });
        //查询店铺列表
        http({
            url: '/yanghao/queryStore',
            method: 'get',
            data: {
                page: page1,
                pageSize: pageSize1,
                isChoose
            }
        }).then(res => {
            let arr = res.data.data;
            for (let i in arr) {
                arr[i].createTime = dayjs(arr[i].createTime).format('YYYY-MM-DD hh:mm:ss');
            }
            setData1(arr);
            setTotal1(res.data.count);
        })
        //查询店铺列表渲染已选择个数
        http({
            url: '/yanghao/queryStore',
            method: 'get',
            data: {
                page: page1,
                pageSize: pageSize1,
                isChoose: '选择'
            }
        }).then(res => {
            setChooseNum(res.data.count);
        })
    }, [isChoose])
    //这是指定店铺的分页参数
    //当前页数
    const [page1, setPage1] = useState(1);
    //每页条数
    const [pageSize1, setpageSize1] = useState(4);
    //总条数
    const [total1, setTotal1] = useState(0);
    let pageChange1 = (page1, pageSize1) => {
        console.log(page1, pageSize1);
        setPage1(page1);
        //查询店铺列表
        http({
            url: '/yanghao/queryStore',
            method: 'get',
            data: {
                page: page1,
                pageSize: pageSize1,
                isChoose
            }
        }).then(res => {
            let arr = res.data.data;
            for (let i in arr) {
                arr[i].createTime = dayjs(arr[i].createTime).format('YYYY-MM-DD hh:mm:ss');
            }
            setData1(arr);
            setTotal1(res.data.count);
        })
    }
    //文件删除时的操作
    const removes = (values) => {
        setImageUrl('');
    };
    const onPreview = (values) => {
    };
    //统计数据
    const onFinish = (values) => {
        //查询已选店铺
        http({
            url: '/yanghao/queryStore',
            method: 'get',
            data: {
                page: 1,
                pageSize: 100000,
                isChoose:'选择'
            }
        }).then(res => {
            let isChooseStore=res.data.data;
            console.log(imageUrl,isChooseStore,bottomList,values);
            http({
                url:'/yanghao/addBanner',
                method:'post',
                data:{imageUrl,isChooseStore,bottomList,values}
            }).then(res=>{
                console.log(res);
                message.success('添加banner成功!');
            })
        })
    };
    const onFinishFailed = (errorInfo) => {
        message.error('请检查!');
    };
    //图片的上传
    const [fileList, setFileList] = useState([
    ]);

    const onChange = ({ fileList: newFileList }) => {
        //获取返回结果
        if (newFileList[0] != undefined && newFileList[0].response != undefined) {
            setImageUrl(newFileList[0].response.data.url);
        }
        setFileList(newFileList);
    };

    //添加商品的弹出框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        //查询商品信息
        http({
            url: '/yanghao/queryStore1',
            method: 'get',
            data: {
                page: 1,
                pageSize
            }
        }).then((res) => {
            setData(res.data.data);
            setTotal(res.data.count);
        })
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //指定店铺的弹出框
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const [data1, setData1] = useState([]);
    const showModal1 = () => {
        setIsModalVisible1(true);
    };

    const handleOk1 = () => {
        setIsModalVisible1(false);
    };

    const handleCancel1 = () => {
        setIsModalVisible1(false);
    };
    //点击弹框的确定按钮
    let sure1 = (e) => {
        setIsModalVisible1(false);
    }
    let choose = (row) => {
        //修改是否选择的选项
        http({
            url: '/yanghao/editChoose',
            method: 'post',
            data: row
        }).then(res => {
            //查询店铺列表
            http({
                url: '/yanghao/queryStore',
                method: 'get',
                data: {
                    page: page1,
                    pageSize: pageSize1,
                    isChoose
                }
            }).then(res => {
                let arr = res.data.data;
                for (let i in arr) {
                    arr[i].createTime = dayjs(arr[i].createTime).format('YYYY-MM-DD hh:mm:ss');
                }
                setData1(arr);
                setTotal1(res.data.count);
            })
        })
    }
    //点击未选和已选
    const notChoose = () => {
        setIsChoose('未选择');
        setPage1(1);
        http({
            url: '/yanghao/queryStore',
            method: 'get',
            data: {
                page: page1,
                pageSize: pageSize1,
                isChoose
            }
        }).then(res => {
            let arr = res.data.data;
            for (let i in arr) {
                arr[i].createTime = dayjs(arr[i].createTime).format('YYYY-MM-DD hh:mm:ss');
            }
            setData1(arr);
            setTotal1(res.data.count);
        })
    }
    const isNotChoose = () => {
        setIsChoose('选择');
        setPage1(1);
        http({
            url: '/yanghao/queryStore',
            method: 'get',
            data: {
                page: page1,
                pageSize: pageSize1,
                isChoose
            }
        }).then(res => {
            let arr = res.data.data;
            for (let i in arr) {
                arr[i].createTime = dayjs(arr[i].createTime).format('YYYY-MM-DD hh:mm:ss');
            }
            setData1(arr);
            setTotal1(res.data.count);
        })
    }
    //添加商品
    //自定义函数和数据
    const [data, setData] = useState([]);
    let dataList = (list) => {
        return list.map((v, i) => {
            return <div key={i} className={v.change == 1 ? 'd-f x-l my-2 y-c borderChange p-1 mx-1 position' : 'd-f x-l my-2 y-c borders p-1 mx-1 position'} onClick={() => change(v.id)}>
                <div>
                    <Image
                        width={60}
                        height={60}
                        src={v.imageUrl}
                    ></Image>
                </div>
                <div className='d-f f-c font-sm y-c mx-1'>
                    <span className='spanWidth '>{v.name}</span>
                    <div className='d-f x-s-b'>
                        <span className='red'>￥{v.sellPrice}</span>
                        <span className='px-2'>库存：{v.stoke}</span>
                    </div>
                </div>
                <Tag color="green" className={v.change == 1 ? 'positionTag' : 'positionTag noShow'}>√</Tag>
            </div>
        })
    }
    //点击商品后
    //存下该点击的商品id
    const [id, setId] = useState('');
    const change = (id) => {
        console.log(id);
        setId(id);
        let arr = [...data];
        for (let i in arr) {
            arr[i].change = 0;
        }
        for (let i in arr) {
            if (arr[i].id == id) {
                arr[i].change = 1;
            }
        }
        setData(arr);
    }
    //分页的函数
    //当前页数
    const [page, setPage] = useState(1);
    //每页条数
    const [pageSize, setpageSize] = useState(4);
    //总条数
    const [total, setTotal] = useState(0);
    let pageChange = (page, pageSize) => {
        setPage(page);
        //查询商品信息
        http({
            url: '/yanghao/queryStore1',
            method: 'get',
            data: {
                page,
                pageSize
            }
        }).then((res) => {
            setData(res.data.data);
            setTotal(res.data.count);
        })
    }
    //点击弹框的确定按钮
    let sure = (e) => {
        setIsModalVisible(false);
        setId(0);
        //通过id查询单个商品放入到最下面表格
        http({
            url: '/yanghao/queryGoodsById',
            method: 'get',
            data: {
                id
            }
        }).then(res => {
            setBottomList(res.data);
        })
    }

    //最下面的表格
    const { Column, ColumnGroup } = Table;
    const [bottomList, setBottomList] = useState([]);
    
    //最下面表格删除
    const bottomDel=(row)=>{
        setBottomList([]);
    }

    return (
        <div className="big-card">
            <div className="card-header">
                <h2>C端banner</h2>
            </div>
            <div className="details yh">

                <span className='font-w px-2 font-sm'>基本信息</span>
                <div className='d-f px-2'>
                    <div>
                        <Form
                            name="basic"
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                label="banner名称"
                                name="name"
                                rules={[
                                    {
                                        required: true,
                                        message: '长度在10个字符内',
                                        max: 10
                                    },
                                ]}
                            >
                                <Input placeholder='请输入banner名称' />
                            </Form.Item>
                            <Form.Item
                                label="banner描述"
                                name="discribe"
                                rules={[
                                    {
                                        required: true,
                                        message: '长度在10个字符内',
                                        max: 10
                                    },
                                ]}
                            >
                                <Input placeholder='请输入banner描述' />
                            </Form.Item>
                            <ImgCrop rotate>
                                <Upload
                                    action="http://img.qincore.cn/api/upload"
                                    listType="picture-card"
                                    name='image'
                                    maxCount={1}
                                    fileList={fileList}
                                    onChange={onChange}
                                    onPreview={onPreview}
                                    headers={{ token: imageToken }}
                                    onRemove={removes}
                                >
                                    {fileList.length < 5 && '+ Upload'}
                                </Upload>
                            </ImgCrop>
                            <div className='bg py-1 px-2 font-sm my-1'>
                                banner尺寸建议裁剪
                            </div>
                            <div className='sliper py-1'>
                                <span className='font-sm font-w'>链接设置</span>
                            </div>
                            <Form.Item
                                name="state"
                                label="状态"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择启用或禁用!',
                                    },
                                ]}
                            >
                                <Radio.Group>
                                    <Radio value="0"><span className='font-sm'>启用</span></Radio>
                                    <Radio value="1"><span className='font-sm'>禁用</span></Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item
                                name="storeType"
                                label="链接对象"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择全部店铺或指定店铺!',
                                    },
                                ]}
                            >
                                <Radio.Group>
                                    <Radio value="0"><span className='font-sm'>全部店铺</span></Radio>
                                    <Radio value="1"><span className='font-sm'>指定店铺</span></Radio>
                                </Radio.Group>
                            </Form.Item>
                            <div className='d-f my-1'>
                                <span className='font-sm'>指定店铺:</span>
                                <a className='font-sm px-5' onClick={showModal1}>未选择/已选择{chooseNum}个</a>
                            </div>
                            <Modal
                                className='ant-modal2'
                                title="指定店铺"
                                visible={isModalVisible1}
                                onOk={handleOk1}
                                onCancel={handleCancel1}
                                cancelText='取消'
                                okText='保存'
                                onOk={(e) => sure1(e)}
                            >
                                <div className='d-f'>
                                    <div className='f-1'>
                                        <div className='d-f f-c bg1 h-100'>
                                            <Button type="primary" className='font-sm mx-1 my-1' onClick={() => { notChoose() }}>未选店铺</Button>
                                            <Button type="primary" className='font-sm my-1 mx-1' onClick={() => { isNotChoose() }}>已选店铺</Button>
                                        </div>
                                    </div>
                                    <div className='f-6 m-2 '>
                                        <div className='d-f y-c'>
                                            <span className='font-sm px-1'>店铺名称</span>
                                            <Input placeholder="搜索" className='font-sm w-30' />
                                            <Button type="primary" className='font-sm my-1 mx-1' size='small'>搜索</Button>
                                        </div>
                                        <div className='yh'>
                                            <Table
                                                dataSource={data1}
                                                id='tables'
                                                rowKey={data1 => data1.id}
                                                pagination={false}
                                            >
                                                <Column title="ID" dataIndex="id" key='id' />

                                                <Column title="店铺名称" dataIndex="name" key='name' />
                                                <Column title="开店时间" dataIndex="createTime" key='createTime' />
                                                <Column
                                                    title="操作"
                                                    key='id'
                                                    render={(text, record) => (
                                                        <Space size="middle">
                                                            <a key={id} onClick={() => choose(record)}>{record.isChoose}</a>
                                                        </Space>
                                                    )}
                                                />
                                            </Table>
                                            <div className='d-f x-r my-2'>
                                                <Pagination
                                                    defaultCurrent={1}
                                                    defaultPageSize={pageSize1}
                                                    current={page1}
                                                    total={total1}
                                                    showSizeChanger
                                                    size='small'
                                                    pageSizeOptions={[pageSize1, pageSize1 * 2, pageSize1 * 3]}
                                                    onChange={(page1, pageSize1) => pageChange1(page1, pageSize1)}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Modal>

                            <Form.Item
                                name="link"
                                label="链接跳转"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择跳转商品或无!',
                                    },
                                ]}
                            >
                                <Radio.Group>
                                    <Radio value="0"><span className='font-sm'>跳转商品</span></Radio>
                                    <Radio value="1"><span className='font-sm'>无</span></Radio>
                                </Radio.Group>
                            </Form.Item>

                            <Button type="primary" className='font-sm w-30' onClick={showModal}>选择商品</Button>
                            <Modal
                                className='ant-modal1'
                                title="添加商品"
                                visible={isModalVisible}
                                onOk={handleOk}
                                onCancel={handleCancel}
                                cancelText='取消'
                                okText='保存'
                                onOk={(e) => sure(e)}
                            // onCancel={(e)=>{cancel(e)}}
                            >
                                <div className='d-f y-c'>
                                    <span className='font-sm'>商品名称</span>
                                    <Input
                                        placeholder='搜素商品'
                                        size='small'
                                        id='inpWidth'
                                        className='mx-1'></Input>
                                </div>
                                <div className='d-f f-w x-c'>
                                    {dataList(data)}
                                </div>
                                <div className='d-f x-s-b'>
                                    <div className='font-sm bg px-2 p-1'>
                                        最多选择<span className='red'>1</span>款商品设置为banner跳转链接
                                    </div>
                                    <div>
                                        {/* <Pagination defaultCurrent={6} total={500} /> */}
                                        <Pagination
                                            defaultCurrent={1}
                                            defaultPageSize={pageSize}
                                            current={page}
                                            total={total}
                                            // pageSize={pageSize}
                                            showSizeChanger
                                            size='small'
                                            pageSizeOptions={[pageSize, pageSize * 2, pageSize * 3]}
                                            onChange={(page, pageSize) => pageChange(page, pageSize)}
                                        />
                                    </div>
                                </div>
                            </Modal>

                            <Table
                                dataSource={bottomList}
                                id='tables'
                                rowKey={bottomList => bottomList.id}
                                pagination={false}
                            >
                                <Column title="商品" key='id' 
                                    render={(t, v) => (
                                        <Space size="middle">
                                            <Image src={v.imageUrl} width={50} height={50}></Image>
                                            <div className='d-f y-c'>
                                                <span>{v.information}</span>
                                                <span>{v.sellPrice}</span>
                                            </div>
                                        </Space>
                                    )}
                                />
                               <Column title="库存" dataIndex="stoke" key='stoke'/>
                                <Column title="成本价" dataIndex="costPrice" key='costPrice'/>
                                <Column title="供货价" dataIndex="supplyPrice" key='supplyPrice'/>
                                <Column title="建议售价" dataIndex="sellPrice" key='sellPrice'/>
                                <Column
                                    title="操作"
                                    key='id'
                                    render={(text, record) => (
                                        <Space size="middle">
                                            <a key={id} onClick={() => bottomDel(record)}>删除</a>
                                        </Space>
                                    )}
                                />
                            </Table>


                            <Form.Item
                                className='bottomStyle my-2'
                                wrapperCol={{
                                    offset: 2,
                                    span: 24,
                                }}
                            >
                                <div className='d-f x-c'>
                                    <Button type="primary" htmlType="submit" className='my-2 font-sm px-2'>
                                        保存
                                    </Button>
                                    <Button type="primary" className='my-2 font-sm px-2 mx-2'>
                                        取消
                                    </Button>
                                </div>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default observer(C2bannerAdd);